<!DOCTYPE html>
<html lang="en" class="no-js">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
		<meta name="viewport" content="width=device-width, initial-scale=1"> 
		<title>留言墙－Stack</title>
		<meta name="description" content="Scattered Polaroids Gallery: A flat-style take on a Polaroid gallery" />
		<meta name="keywords" content="scattered polaroids, image gallery, javascript, random rotation, 3d, backface, flat design" />
		<meta name="author" content="Codrops" />
		<link rel="shortcut icon" href="../favicon.ico">
		<link rel="stylesheet" type="text/css" href="css/normalize.css" />
		<link rel="stylesheet" type="text/css" href="css/demo.css" />
		<link rel="stylesheet" type="text/css" href="css/component.css" />
		<script src="js/modernizr.min.js"></script>
		<script src="js/jquery-1.10.2.js"></script>
        <script src="/socket.io/socket.io.js"></script>            

	</head>
	<body>
		<div class="container">
			<section id="photostack-3" class="photostack">
				<div>
				</div>
			</section>
		</div><!-- /container -->
		<script src="js/classie.js"></script>
		<script src="js/photostack.js"></script>
		<script>
			// [].slice.call( document.querySelectorAll( '.photostack' ) ).forEach( function( el ) { new Photostack( el ); } );
			var socket = io.connect(location.host);
			//订阅图片目录
			socket.on('connect', function(data) {
				socket.emit('join', '/upload');
			});
			socket.on('added', function(data) {
				var pics=[];
				for(var i=0; i<data.length; i++){
					if(data[i].indexOf('/upload')==0)
						pics.push(data[i]);
				}
				if(pics.length>0)
					ps.pushPics(pics);
			});
			
			
			var ps = new Photostack( document.getElementById( 'photostack-3' ), {
				//showNavigation:false,
				callback : function( item ) {
					//console.log(item)
				}
			} );
		</script>
	</body>
</html>